<template>
  <div class="table-container">
    <!-- 使用 el-table 组件 -->
    <el-table :data="messageList" size="medium" style="width: 100%">

      <!-- 标题列 -->
      <el-table-column
        prop="title"
        label="标题"
        width="220"
        align="center"
        label-class-name="table-header"
        class-name="col-title"
      />

      <!-- 内容列 -->
      <el-table-column
        prop="content"
        label="内容"
        min-width="600"
        label-class-name="table-header"
        class-name="col-content"
      />
    </el-table>
  </div>
</template>

<script setup>
import { ref ,onMounted} from 'vue';
import { queryMessagePageList } from '@/apis/workorderAPI'
import { ElMessage } from 'element-plus'
const messageList = ref([]);
const pageNo=ref(1);
const pageSize=ref(1000);
const params = ref({
      pageNo:'', // 从1开始
      pageSize: ''
    });
const fetchData=async()=>{
  try{
    params.value.pageNo=pageNo;
    params.value.pageSize=pageSize;
    const {data}=await queryMessagePageList(params.value);
    const {records}=data;
    messageList.value=records;
  }catch{
    ElMessage.error("获取失败");
  }

}
onMounted(() => {
  fetchData();
})
</script>

<style scoped>
.table-container {
  padding: 20px;
  box-sizing: border-box;
}

/* 自定义表头样式 */
.table-header {
  color: #409EFF;
  font-weight: bold;
}

/* 自定义列内容样式 */
.col-title {
  color: #606266;
  font-weight: 500;
}

.col-content {
  color: #909399;
  /* 处理长文本溢出，显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
